<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>
<style>
    *{
        margin: 0px;
        padding: 0px;
        text-align:center;
        text-decoration: none;
    }

    #root{
        position: absolute;
        width: 500px;
        height:310px;
        background-color: #deb88738;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        box-shadow: 3px 5px 3px 3px rgba(0,0,0,0.3);
    }
    #top_image{
        height:155px;
        width:100%;
        background-image:url("image/top_image.jpg");
        background-size: auto;/*图片适应div大小*/
    }
    #bottom{
        width: 100%;
        height: 152px;
    }
    #bottom_left{
        position:absolute;
        width:30%;
        height:100px;
        top: 180px;
        float: left;

    }
    #bottom_left img{
        width:100px;
        height:100px;
        border-radius: 50%;

    }
    #bottom_right{
        width: 357px;
        height: 151px;
        float: right;
    }
    .formInfo{
        width:300px;
        height:30px;
        margin-top: 15px;
        margin-left:20px;
    }
    .formInfo input{
        width: 213px;
        height: 29px;
        border-radius: 5px;
    }
    .formInfo a {
        font-size: 13px;
        margin-left: 20px;
        color: #269994;
        font-family: 楷体;
    }
    #btn{

        width: 150px;
        height: 30px;
        background-color: #249393;
        border: none;
        color: azure;
        font-size:14px;
        font-weight: bolder;
        display: inline-block;
        position: absolute;
        left: 200px;
    }
</style>
<body>
    <div id="root">
        <div id="top_image">
        </div>
        <div id="bottom">
            <div id="bottom_left">
                <img src="image/touxiang.jpg"></img>
            </div>
            <div id="bottom_right">
                <form action="">
                    <div class="formInfo">
                        <input type="text" name="uname" placeholder="请输入您de账号名"/>
                        <a href="ChuChe.html">注册账号</a>
                    </div>
                    <div class="formInfo">
                        <input type="password" name="upwd" placeholder="请输入您de密码"/>
                        <a href="">没有卵用</a>
                    </div>
                    <div class="formInfo">
                        <input type="button" value="登  录" id="btn" onclick="Loginclick()">
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script>
        //跳转到主页
        function jmpMain() {
            window.location.href="Main.html";
        }
        function Loginclick() {
            //根据获取表单中传过来的信息
            var FormInfo=localStorage.getItem(document.forms[0].uname.value);
            //转化成对象 拿他里边的东西
            FormInfo = JSON.parse(FormInfo);
            //如果没有该用户名就要注册
            if(localStorage.getItem(FormInfo.name)==null){
                alert("没有此账号！")
            }else{
                if(document.forms[0].upwd.value!=FormInfo.pwd){
                    alert("用户密码错误！")
                }else{
                    alert("登录成功！3秒后我们将为你跳转到主页")
                    setTimeout(jmpMain,5000);
                    //暂时保存他的名字用于修改
                    sessionStorage.setItem("名字",FormInfo.name);
                }
            }
        }
        //alert(FormInfo.age);
    </script>
</body>
</html>
